<template>
    <div style="width:100%;display:flex;flex-direction:column;justify-content:center;align-items: center;">
     <div style="width: 460px;box-shadow: 0 4px 10px 0 #cbd2db;background-color: #fff;margin-top:180px;display:flex;flex-direction:column;justify-content:center;align-items: center;">
         <!-- <div ><img class="login_logo" src="../../static/image/logintitle.png"/></div> -->
         <div ><img class="login_logo" src="https://yuhuaxia.oss-cn-shanghai.aliyuncs.com/img/logintitle.png"/></div>
         <div style="width:100%;height: 50px;display:flex;justify-content:center;align-items:center;">
             <div class="loginnav" @click="loginflag=1" :class="{navactive:loginflag===1}">注册</div>
             <div class="loginnav " @click="loginflag=0" :class="{navactive:loginflag===0}">登录</div>
         </div>
         <ul class="content">
             <!-- 登录 -->
             <li class="content" v-if="loginflag===0">
                <div style="width: 356px;">
                    <form style="display:flex;flex-direction:column;margin-bottom:20px;">
                        <input type="text" class="input phone" v-model="username" @keyup.enter="login" placeholder=" 用户名"/>
                        <input type="password" class="input" v-model="password" @keyup.enter="login" placeholder=" 请输入密码" />
                        <input type="button"  class="button" @click="login" value="登 录"/>
                        <!-- <div class="forgetpsw">忘记密码？</div> -->
                    </form>
                </div>
             </li>
             <!-- 注册 -->
             <li class="content" v-if="loginflag===1">
                 <div style="width: 356px;">
                    <form style="display:flex;flex-direction:column;">
                        <input type="text" class="input phone" placeholder=" 手机号" v-model="phone" v-validate="'required|mobile'" data-vv-name="mobile" name="mobile"/>
                        <span v-show="errors.has('mobile')" class="help is-danger" style="color:red">{{ errors.first('mobile') }}</span>
                        <div style="display:flex;flex-direction: row">
                        <input type="text" class="input" placeholder=" 请输入验证码" v-model="yzcode" style="width:230px;" v-validate="'required'" name="code" />
                        <input class="button" @click="getyzcode" value=" 获取短信验证码" style="width:120px;margin-left:6px;cursor: pointer;"/>
                        </div>
                        <span class="help is-danger" style="color:red">{{ errors.first('code') }}</span>
                        <input type="text" class="input phone" placeholder="用户名" v-model="name"/>
                        <input type="text" class="input phone" placeholder="密码" v-model="pass" name="password" v-validate="'required|min:8'"/>
                        <span class="help is-danger" style="color:red">{{errors.first('password')}}</span>
                        <input type="button"  class="button" @click="registe" value="注 册" style="margin-bottom: 67px;"/>
                    </form>
                </div>
             </li>
         </ul>
         
         
     </div>
     <!-- 页脚 -->
    <footer class="footer">
        <div style="display:flex;flex-direction:row;justify-content:center;align-items:center;">
            <div style="display:flex;flex-direction:row;justify-content:center;margin-right: 50px;">
            <div class="font">关于我们:</div>
            <div class="font">FPS精英团队</div>
            </div>
            <div style="display:inline-block;display:flex;flex-direction:row;justify-content:center;align-items:center;">
            <div style="display: inline-block;" class="font">联系我们：</div>
            <img style="display: inline-block;width: 100px;height: 100px;"
                src=".././../static/image/qunliaoerweima.png"
            />
            </div>
        </div>
    </footer>
    </div>
</template>
<style scoped>
.footer {
  position: absolute;
  bottom: 0;
  height: 130px;
  width: 100%;
  background-color: #0d1c30;
  text-align: center;
  padding-top: 17px;
}
.footer span {
  font-size: 15px;
  color: white;
  padding: 0px 60px;
}
.font {
  color: white;
  font-size: 15px;
}
*{ margin:0; padding:0; }
.login_logo{
    width: 100%;
    height: 114px;
    /* background-image: url(../../static/image/login标题.png); */
    background-size: cover;
    background-repeat: no-repeat;
}
.loginnav{
    width: 90px;
    height: 38px;
    text-align: center;
    line-height: 38px;
    font-size: 18px;
    line-height: 38px;
    color: #8997AB;
    margin-top: 20px;
    border-bottom: 2px solid #E8ECF0;
}
.navactive{
    color: #4184E1;
    border-bottom: 2px solid  #4184E1;
}
ul,li{
    list-style: none;
}
.content{
    width: 356px;
}
.input{
    width: 100%;
    height: 48px;
    line-height: 48px;
    border: solid 1px #E7EAEE;
    border-radius: 2px;
    margin-top: 18px;
}
.button{
    background-color: #4184E1;
    width: 100%;
    height: 48px;
    font-size: 16px;
    line-height: 48px;
    text-align: center;
    color: white;
    margin-top: 18px;
    border: solid 1px #4184E1;
    border-radius: 2px;
}
.forgetpsw{
    width: 100px;
    height: 37px;
    line-height: 37px;
    text-align: right;
    color: #4184e1;
    font-size: 14px;
    cursor: pointer;
    margin-left: 260px;
    margin-bottom: 30px;
}
</style>
<script>
import Vue from 'vue'
import {messages} from '../validate/reg'
export default {
    data () {
        return{
            loginflag: 0,
            username:'',
            password:'',
            phone:'',
            yzcode:'',
            name:'',
            pass:''
        }
    },
    mounted () {
        this.$validator.localize('zh_CN', messages);
        this.$validator.extend('mobile', {
            getMessage: field => '手机号有误',
            validate: value => {
            return /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
            }
        })
        console.log(typeof this.loginflag)
    },
    methods: {
        handleSubmit() {
        this.$validator.errors.clear();
        this.$validator.validateAll({
          mobile: this.mobile,
          password: this.password,
          sms_captcha: this.sms_captcha,
          re_password: this.re_password,
          url: this.url,
          age: this.age,
          email: this.email,
          birthday: this.birthday,
          id_card: this.id_card,
          nickname: this.nickname,
        }).then((valid) => {
          console.log(valid);
          if (true === valid) {
            console.log('验证通过');
          } else {
            console.log(this.$validator.errors.all());
          }
        });
      },
      handleSendSms() {
        this.$validator.errors.clear();
        this.$validator.validateAll({
          mobile: this.mobile,
          img_captcha: this.img_captcha
        }).then((valid) => {
          console.log(valid);
          if (true === valid) {
            console.log('验证通过');
          } else {
            console.log(this.$validator.errors.all());
          }
        });
      },
        login(){
            this.$http.post('loginRequest?username='+this.username+'&password='+this.password+'').then((resp) => {
                if (resp.data.status === 200) {
                    console.log(resp.data)
                    // this.$store.commit('isLogin',resp.data.data.SessionToken)
                    localStorage.setItem('Userid', resp.data.data.User.id)
                    localStorage.setItem('usertype', resp.data.data.User.type)
                    localStorage.setItem('username',resp.data.data.User.name)
                    localStorage.setItem('SessionToken',resp.data.data.SessionToken)
                    this.$message('登录成功')
                    // Vue.prototype.$user = resp.data.data.User.name
                    // console.log(Vue.prototype.$user )
                    this.$router.push('/')
                    let arr = resp.data.data.User.jsb.authority
                    arr = arr.split("*")
                    // console.log(arr)
                    localStorage.setItem('permission',arr)
                } else if(resp.data.status === 499){
                    this.$message.error('当前用户没有该权限！')
                }else {
                    this.$message('用户名或密码错误')
                    // this.loading = false
                }
            })
        },
        // 目前需要修改接口状态为无sessionToken值
        getyzcode () {
            if(this.phone !== null){
                this.$http.get('smsRegister?phone='+this.phone+'').then((resp) => {
                    if (resp.data.status === 200) {
                        console.log(resp.data)
                        this.$message("验证码已发送到手机")
                    }else if(resp.data.status === 499){
                    this.$message.error('当前用户没有该权限！')
                    } else {
                        this.$message('发送验证码错误')
                        // this.loading = false
                    }
                })
            } else {
                this.$message("请输入手机号!")
            } 
        },
        registe () {
            if(this.phone !== '' && this.yzcode !== '' && this.name !== '' && this.pass !== ''){
                this.$http.get('selectPhoneIsExisted?phone='+this.phone+'').then((resp) => {
                    if (resp.data.status === 200) {
                        this.$http.post('registerRequest?phone='+this.phone+'&code='+this.yzcode+'&name='+this.name+'&password='+this.pass+'').then((resp) => {
                            if (resp.data.status === 200) {
                                console.log(resp.data)
                                this.$message("注册成功")
                                this.loginflag = 0
                            }else if(resp.data.status === 499){
                                this.$message.error('当前用户没有该权限！')
                            } else {
                                this.$message('注册失败')
                                // this.loading = false
                            }
                        })
                    } else {
                        this.$message.error(resp.data.message)
                    }
                })
                
            } else {
                this.$message.error("请输入完整信息")
            }
        }
    }
}
</script>